<template>
  <div class="components-container">
    <!-- <aside>
      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
      {{ $t('components.dropzoneTips') }}
    </aside> -->
    <div class="editor-container">
      <el-card lass="box-card-top">
        <div slot="header" class="clearfix">
          <span>控制台</span>
        </div>
        <div class="component-item">
          <el-select v-model="model_select" placeholder="模型选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select v-model="value_return" style="margin-left: 10px;" placeholder="结果返回类型">
            <el-option
              v-for="item in options_return"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" style="margin-left: 10px;" @click="forward">文件信息提取</el-button>
        </div>
      </el-card>
    </div>
    <div style="margin-top: 20px;">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>上传文档图片</span>
            </div>
            <div class="component-item">
              <div class="myVueDropzone-box">
                <!-- <dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" /> -->
                <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:8080/infer"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-if="!show_loading && !imageUrl" class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
                <div v-if="!show_loading && !imageUrl" id="myReturnBoxMsg" style="margin-top: 2em; text-align: center;">
                  <i style="display: inline-block" class="material-icons">上传图片</i>
                  <br>Drop image here to upload
                </div>
                <el-table
                  v-if="show_loading"
                  v-loading="loading"
                  style="width: 100%; height: 100%;"
                />

              </div>

            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>信息提取结果返回</span>
            </div>
            <div class="component-item">
              <div class="return-box">
                <div v-show="!show_res" id="myReturnBoxMsg" style="margin-top: 12.6em; text-align: center;">
                  <i style="display: inline-block" class="material-icons">结果返回</i>
                  <br>Document information extraction result return
                </div>
                <div v-show="show_pic" style="margin-top: 3em; text-align: center;">
                  <img class="pic-box" :src="res_imageUrl">
                </div>
                <div v-show="show_json" style="margin-top: 3em; text-align: center;">
                  <json-viewer
                    :value="JSON.parse(jsonStr)"
                    :expand-depth="2"
                    boxed
                    sort
                    :show-array-index="true"
                    copyable
                  />
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import JsonViewer from 'vue-json-viewer'

export default {
  name: 'DropzoneDemo',
  components: { JsonViewer },
  data() {
    return {
      options: [{
        value: '模型1',
        label: '模型1'
      }
      // , {
      //   value: '模型2',
      //   label: '模型2'
      // }
      ],
      model_select: '模型1',
      options_return: [{
        value: '图像',
        label: '图像'
      }, {
        value: 'JSON',
        label: 'JSON'
      }, {
        value: 'LOG',
        label: 'LOG'
      }],
      value_return: '',
      show_res: false,
      show_pic: false,
      show_json: false,
      loading: true,
      show_loading: false,
      imageUrl: '',
      res_imageUrl: '',
      jsonStr: '{\r\n    "success": true,\r\n    "code": 200,\r\n    "msg": "操作成功",\r\n    "data": ""\r\n}'
    }
  },
  methods: {
    dropzoneS(file) {
      console.log(file)
      this.$message({ message: '开始推理', type: 'success' })
    },
    dropzoneR(file) {
      console.log(file)
      this.$message({ message: 'Delete success', type: 'success' })
    },
    forward() {
      if (this.value_return === '图像') {
        this.$store.dispatch('user/getIMG', 'TEMP_RESULT.jpg').then((res) => {
          console.log(res)

          // const blob = new Blob([res], { type: "image/png" });
          const url = URL.createObjectURL(res)
          this.res_imageUrl = url
          this.show_pic = true
          this.show_json = false
          this.show_res = true
        }).catch(res => {
          console.log(res)
        })
      } else if (this.value_return === 'JSON') {
        this.$store.dispatch('user/getFILE', 'TEMP.json').then((res) => {
          console.log(res.body)
          console.log(JSON.parse(res.body))
          this.jsonStr = res.body
          this.show_res = true
          this.show_pic = false
          this.show_json = true
        }).catch(res => {
          console.log(res)
        })
      } else { // LOG
        this.$store.dispatch('user/getFILE', 'TEMP_LOG.log').then((res) => {
          console.log(res.body)
        }).catch(res => {
          console.log(res)
        })
      }
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
      console.log(res)
      this.$notify.closeAll()
      this.show_loading = false
      if (res.code === 1000 && res.body === '推理成功！') {
        this.$notify({
          title: '推理成功',
          message: '请选择结果返回类型，点击文件信息提取返回图像或JSON结果',
          type: 'success',
          duration: 0
        })
      } else {
        this.$message({ message: '推理失败，请重试！', type: 'error' })
      }
    },
    beforeAvatarUpload(file) {
      this.open1()
      return true
    },
    open1() {
      this.$notify({
        title: '上传成功',
        message: '模型正在推理中，请等待...',
        type: 'success',
        duration: 0
      })
      this.show_loading = true
    }
  }
}
</script>

<style scoped>
  /* .editor-container {
    display: flex;
  } */
  .return-box {
    border: 2px solid #E5E5E5;
    font-family: 'Roboto', sans-serif;
    /* color: #777; */
    transition: background-color .2s linear;
    padding: 5px;

    width: 100%;
    height: 900px;
    /* margin-left: 30px; */
  }
  .myVueDropzone-box {
    text-align: center;
    border: 2px solid #E5E5E5;
    height: 900px;
  }
  .pic-box {
    height: 700px;
    width: 600px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    margin-top: 50px;
    width: 600px;
    height: 700px;
    display: block;
  }
</style>

